
<!DOCTYPE html>

<html class="no-js no-scroll" lang="">
	
	<head>
		
		<title>Home</title>
		
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>

		<meta name="navbar-logo" content="url(dribbble-logo-light.png)"/>
		<meta name="navbar-bg-color" content="#e5508c"/>
		<meta name="navbar-tint-color" content="white"/>
		<meta name="navbar-text-color" content="white"/>

		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/main.css"/>

	</head>

	<body>

		<div name="tabbar" class="tab-bar">
			<div class="tab-col">
				<div id="tab1" name="popular" class="tab" onclick="@selector(switchTab1:)">Popular</div>
			</div>
			<div class="tab-col">
				<div id="tab2" name="debuts" class="tab" onclick="@selector(switchTab2:)">Debuts</div>
			</div>
			<div class="tab-col">
				<div id="tab3" name="everyone" class="tab" onclick="@selector(switchTab3:)">Everyone</div>
			</div>
		</div>

		<RefreshCollectionView id="list" name="list" class="list" columns="3" is-vertical
			onswipe-left="@selector(nextTab:)"
			onswipe-right="@selector(prevTab:)">

			<UICollectionViewCell name="section-shots" class="list-item" is-column onclick="@selector(viewShot:)">
				<img name="shot-url" class="shot-img"/>
				<!--
				<div class="shot-author">
					<img name="author-avatar" class="author-avatar"/>
				</div>
				 -->
			</UICollectionViewCell>

		</RefreshCollectionView>

		<style type="text/css">

			body {
				width: 100%;
				height: 100%;
				background-color: #e5508c;
			}

			.tab-bar {
				display: block;
				width: 100%;
				height: 34px;
				/* box-shadow: 0px 0.5px 0.5px black; */
				z-index: 2;
				background-color: #e5508c;
			}
		
			.tab-col {
				float: left;
				display: block;
				width: 33.33%;
				height: 34px;
			}

			.tab {
				width: 70%;
				height: 30px;
				margin: 0 auto;
				font-size: 14px;
				line-height: 34px;
				color: #fff;
				text-align: center;
				font-weight: normal;
			}

			.active {
				color: #fff;
				font-size: 14px;
				font-weight: bold;
				border-bottom: 2px solid white;
			}

			.list {
				display: block;
				width: 100%;
				height: 100%;
				inset-bottom: 34px;
				inset-left: 2px;
				inset-right: 2px;
			}

			.list-item {
				width: 100%;
				height: auto;
			}

			.shot-img {
				width: 100%;
				height: equals(width);
				content-mode: fill;
				margin: 2px;
				background-color: #eee;
				border-radius: 2px;
				border-color: white;
				border-style: solid;
			}

			/*
            @media (device-width: 320px) {
                .shot-img {
                    border-radius: 20px;
                    border-width: 1px;
                    border-color: white;
                }
            }
			*/

			.shot-author {
				display: block;
				position: absolute;
				left: 4px;
				bottom: 10px;
				width: 100%;
				height: 20px;
			}

			.author-avatar {
				display: inline-block;
				margin-left: 2px;
				margin-bottom: 2px;
				width: 20px;
				height: 20px;
				background-color: #bbb;
				border-radius: 14px;
				border-width: 2px;
				border-style: solid;
				border-color: #fff;
			}

		</style>
		
	</body>
	
</html>
